<template>
	<div class="bill">
		<van-tabs v-model="active">
		  	<van-tab v-for="(item,index) in title_data" :key="index">
		  		<div slot="title" class='ellipsis van-ellipsis' @click="loadInitData(item)" >{{ item.name }}</div>
		  		<header class="header pl15 pr15 pt40 border-b20 pos-fix full-width">
		  			<h3 class="fs16 white">本月采购总额</h3>
		  			<p class="fs40 white"><i class="fs24">￥</i>{{ data.money ? data.money : '0.00' }}</p>
		  		</header>
		  		 <section class="bill-detail">
		  		 	<h3 class="fs15 c03 pt15 pb15 pl15 pr15">账单明细</h3>
		  		 	<ul v-if="data.list" class="list">
		  		 		<li  v-for="item in data.list">
			  		 		<a type="button" href="javascript:void(0);" class='layout-juscon border-t pl15 pr15 pt20 pb20' @click="jump(item)" style="cursor: pointer;">
			  		 			<div class="left-content w60"> 
			  		 				<p class="fs14 black bold ellipsis">{{ item.goods_name }}</p>
									<p class="pt10 pb10">规格:<span class="pb5 pt5 pl10 pr10 radius bg-f5 mr5" v-if="item.sku_name">{{ item.sku_name }}</span></p>
									<p class="c64 fs12">数量:{{ item.num }}个</p>
									<p class="c64 fs12 mt10">{{ item.created_at }}<span class="fs12 c64 ml10">{{ item.pay }}</span></p>
			  		 			</div>
			  		 			<div class="right-content">
			  		 				<button class="subject border radius pl15 pr15 pt5 pb5 border-red">我还想要</button>
			  		 				<p class="fs20 subject bold mt40"><i class="fs16">￥</i>{{ item.price * item.num }}</p>
			  		 			</div>
			  		 		</a>
		  		 		</li>
		  		 	</ul>
		  		 	<template v-else>
		  		 		<default explain="暂无账单信息~"></default>
		  		 	</template>
		  		 	<!-- <p v-else class="align-center" style="margin-top:20%;">暂无账单信息~</p> -->
		  		 </section>
		 	</van-tab>
		</van-tabs>
	</div>
</template>

<script> 
import Default from "@/components/Default";
import { formatDate } from '@/utils';
import { Tab, Tabs } from 'vant';
import { App } from '@/utils';
	export default{
		components: {
			Tab,
			Tabs,
			Default
		},
		data()
		{
			return{
				title_data : [
					{ name:'1月',id:1 },
					{ name:'2月',id:2 },
					{ name:'3月',id:3 },
					{ name:'4月',id:4 },
					{ name:'5月',id:5 },
					{ name:'6月',id:6 },
					{ name:'7月',id:7 },
					{ name:'8月',id:8 },
					{ name:'9月',id:9 },
					{ name:'10月',id:10 },
					{ name:'11月',id:11 },
					{ name:'12月',id:12 },
				],
				data  		: [],
				month_id 	: formatDate(new Date(),'MM'),
				active      : formatDate(new Date(),'MM') - 1,
				token       : this.$route.query.token,				 
			}
		},
		created()
		{
			this.loadData();
		},
		methods:
		{
			loadData()
			{
				this.$http.get('/user/bill',{ params : { month: this.month_id },headers:{
						Authorization : this.$route.query.token
					}},
				).then(res => {
					this.data = res.data;
				})
			},
			loadInitData(item)
			{
				this.month_id = item.id;
				this.data = [];
				this.loadData();
			},
			jump(item)
			{
				let params = {
					crow_id : item.crow_id
				}
				App(true,'jumpDetail',params,(data) => {
					console.log(data);
				})	 
			}
		}
	}
</script>

<style lang="less">
	.bill{
		.van-tabs__wrap--scrollable{
			.van-tab{
				flex: 0 0 16%;
			}
			.van-tab--disabled{
				flex: 0 0 13%;
			}
		}
		.van-tabs__line{
			display: none;
		}
		.van-tabs__wrap{
			position: fixed;
		}
		.van-tab--active{
			position: relative;
			.van-ellipsis{
				color:#fff; 
				position: absolute;
				left:50%;
				top:50%;
				transform: translate(-50%,-50%);
			}
		}
		.van-tab--active:before{
			content:"";
			width: 42px;
			height: 21px;
			border-radius: 4px;
			background-color: #f44;
			position: absolute;
			left:50%;
			top:50%;
			transform: translate(-50%,-50%);
		}
		.header{
			height: 170px;
			background-image: url(../../assets/banner-bg2.jpg);
			background-repeat: no-repeat;
			background-position: center center;
			background-size: 100% 100%;
			top:44px;
			z-index:99;
		}
		.bill-detail
		{
			margin-top:180px;
			.list{
				// overflow-x: scroll;
				-webkit-overflow-scrolling: touch;
			}
		}
	}
</style>